<div class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="box">
        <el-form :inline="true" :model="listQuery" class="demo-form-inline" label-width="75px">
          <el-form-item label="权益类型" prop="equityType">
            <el-select v-model="listQuery.equityType" placeholder="请选择权益类型" clearable @change="changeEquityType">
              <el-option v-for="item in gradeOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="权益名称" prop="equityLevelID">
            <el-select v-model="listQuery.equityID" placeholder="请选择权益名称" clearable>
              <el-option v-for="item in equityOptions" :key="item.equityID" :label="item.equityName"
                         :value="item.equityID"/>
            </el-select>
          </el-form-item>
<!--          <el-form-item label="权益级别" prop="equityLevelID">-->
<!--            <el-select v-model="listQuery.equityLevelID" placeholder="请选择权益级别" clearable @change="changeEquityLevel">-->
<!--              <el-option v-for="item in equityLevelOptions" :key="item.equityLevelID" :label="item.equityLevelName"-->
<!--                         :value="item.equityLevelID"/>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item label="服务名称" prop="serviceName">
            <el-select v-model="listQuery.serviceID" placeholder="请选择服务名称" clearable>
              <el-option v-for="item in serviceOptions" :key="item.serviceID" :label="item.serviceName"
                         :value="item.serviceID"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <button class="btn btn-default" type="button" @click="queryPageData">查询</button>
            <button class="btn btn-lg bg-green" type="button" @click="addStep=1"><i class="entypo-pencil"></i>添加</button>
          </el-form-item>
        </el-form>
        <div class="box-body">
          <div class="table-responsive">
            <el-table
              v-loading="listLoading"
              :data="tableData"
              border
              fit
              stripe
              highlight-current-row
              style="width: 100%;"
              @row-click="onRowClick"
            >
              <el-table-column
                label="权益名称"
                prop="equityName"
                align="left"
                min-width="80">
              </el-table-column>
              <el-table-column
                label="权益类型"
                prop="equityType"
                align="left"
                width="100">
                <template slot-scope="scope">
                  <span>{{ scope.row.equityType == 1 ? '保单权益' : '客户权益' }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="权益备注"
                prop="remark"
                align="left"
                min-width="120">
              </el-table-column>
              <el-table-column
                label="权益状态"
                prop="equityStatus"
                align="left"
                width="100">
                <template slot-scope="scope">
                  <span>{{ scope.row.equityStatus == 0 ? '正常' : '暂停' }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="创建时间"
                prop="createTime"
                align="left"
                width="180">
                <template slot-scope="scope">{{formatTime(scope.row.createTime)}}</template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="left"
                class-name="small-padding fixed-width"
                width="110">
                <template slot-scope="{row}">
                  <el-button class="btn1" type="text" @click="editEquity(row)">修改</el-button>
                  <el-button class="btn1" type="text" @click="deleteEquity(row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="box-footer clearfix">
          <!-- 控制分页模块 -->
          <pagination align="right" v-show="dataCount>0" :total="dataCount" :page.sync="listQuery.page"
                      :limit.sync="listQuery.limit" @pagination="queryPageData"/>
        </div>
      </div>
    </div>
  </div>

  <!-- 添加权益 -->
  <el-dialog
    :visible.sync="showAddEquity"
    v-if="showAddEquity"
    :close-on-click-modal="false"
    :show-close="false"
    :append-to-body="true"
    style="margin-top: -5vh;"
  >
    <add-equity :data="stepData" @next="addNextStep" @close="addStep=0"/>
  </el-dialog>

  <!-- 添加等级 -->
  <el-dialog
    :visible.sync="showAddLevel"
    v-if="showAddLevel"
    :close-on-click-modal="false"
    :append-to-body="true"
    :show-close="false"
    style="margin-top: -5vh;"
  >
    <add-level :data="stepData" @next="addNextStep" @previous="addPreviousStep" @close="addStep=0" />
  </el-dialog>

  <!-- 添加服务 -->
  <el-dialog
    :visible.sync="showAddService"
    v-if="showAddService"
    :close-on-click-modal="false"
    :show-close="false"
    :append-to-body="true"
    width="80%"
    style="margin-top: -5vh;text-align: right;"
  >
    <add-service :data="stepData" :service-array="allServiceList" @previous="addPreviousStep" @close="addStep=0" @saved="addSaved"/>
  </el-dialog>

  <!-- 修改 -->
  <el-dialog
    :visible.sync="showEditEquity"
    v-if="showEditEquity"
    :close-on-click-modal="false"
    :show-close="false"
    :append-to-body="true"
    width="80%"
    style="margin-top: -5vh;"
  >
    <edit-equity @close="editFinish" :equity="currentEquity" :service-array="allServiceList"/>
  </el-dialog>

</div>
